<template>
  <div class="ParamsSetting">
    <div class="ParamsSetting1">
      <VonCrumbs title="选择配方"></VonCrumbs>
      <el-checkbox-group v-model="product" class="checkList" @change="groupProductChange(item)">
        <el-checkbox class="checkList" :label="item.id" :key="item.id" v-for="item in products">{{item.name}}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="ParamsSetting2" v-show="showWorkStation">
      <VonCrumbs title="选择工站"></VonCrumbs>
      <el-checkbox-group v-model="workStation" class="checkList2222 checkList" @change="groupWorkStationChange(item)">
        <el-checkbox :label="item.workStationId" :key="item.workStationId" v-for="item in workStations">
          {{item.workStationName}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="ParamsSetting3" v-show="showCompare">
      <VonCrumbs :isShowTitle="false" componentName="ParamsSetting" subTitle1="当前型号" subTitle2="工位号" :content1="productName" :content2="workStationName">
      </VonCrumbs>
      <div class="barCode">
        <p class="title">产品条码信息</p>
        <VonBox ref="productRef"></VonBox>
        <p class="title" style="margin-top: 20px">物料码信息</p>
        <VonBox ref="materialRef" isMultiple></VonBox>
      </div>
      <el-button type="primary" size="small" @click="save()" class="addButton">
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
import {
  getRecipeOptions,
  getRecipe,
  getCompare,
  createCompare,
  updateCompare
} from "../../api/workStation/mainControl";
import { openLoading, closeLoading } from "../../common/prompt";
export default {
  name: "ParamsSetting",
  data() {
    return {
      id: "",
      product: [],
      workStation: [],
      products: [],
      options: [],
      workStations: [],
      showWorkStation: false,
      showCompare: false,
      productName: "",
      workStationName: "",
      isUpdate: false
    };
  },
  mounted() {
    this.getProducts();
  },
  methods: {
    getProducts() {
      getRecipeOptions().then(res => {
        this.products = res.data;
      });
    },
    groupProductChange() {
      this.workStation = [];
      this.showCompare = false;
      if (this.product.length > 1) {
        this.product.shift();
      }
      if (this.product.length > 0) {
        this.showWorkStation = true;
        this.productName = this.products.find(
          p => p.id == this.product[0]
        ).name;
        var params = {
          id: this.product[0]
        };
        getRecipe(params).then(res => {
          this.workStations = res.data.recipeDetails;
          res.data.recipeMaterials.map(m => (m.id = m.materialId));
          this.$refs.materialRef.options = res.data.recipeMaterials;
          this.$refs.materialRef.options.map(o => (o.name = o.materialName));
        });
      } else {
        this.showWorkStation = false;
      }
    },
    groupWorkStationChange() {
      if (this.workStation.length > 1) {
        this.workStation.shift();
      }
      if (this.workStation.length > 0) {
        this.workStationName = this.workStations.find(
          p => p.workStationId == this.workStation[0]
        ).workStationName;
        const condition = {
          ProductId: this.product[0],
          WorkStationId: this.workStation[0]
        };
        getCompare(condition).then(res => {
          if (res.data.title) {
            this.id = res.data.title.id;
            this.isUpdate = true;
            this.$refs.productRef.formData1 = [res.data.title];
            this.$refs.materialRef.formData12 = res.data.details;
          } else {
            this.isUpdate = false;
            this.$refs.productRef.formData1 = [
              {
                barCodeLength: "",
                isCompare: false,
                beginText: "",
                compareLength: "",
                compareText: ""
              }
            ];
            this.$refs.materialRef.formData12 = [];
          }
        });
        this.showCompare = true;
      } else {
        this.showCompare = false;
      }
    },
    save() {
      for (var key in this.$refs.productRef.formData1[0]) {
        if (!this.$refs.productRef.formData1[0][key] && key != "isCompare") {
          this.$message.error("产品比对信息没有填写完整。");
          return;
        }
      }
      // if (this.$refs.materialRef.formData12.length == 0) {
      //   this.$message.error("至少填入一个物料比对信息。");
      //   return;
      // }
      this.$confirm("是否确认操作？").then(() => {
        let data = {
          title: this.$refs.productRef.formData1[0],
          details: this.$refs.materialRef.formData12
        };
        data.title.productId = this.product[0];
        data.title.workStationId = this.workStation[0];
        openLoading("处理中...");
        let ApiMethod;
        if (this.isUpdate) {
          data.title.id = this.id;
          ApiMethod = updateCompare;
        } else {
          ApiMethod = createCompare;
        }
        ApiMethod(data).then(res => {
          if (res.status == 200 || res.status == 204) {
            this.$message.success("保存成功");
            this.isUpdate = true;
            closeLoading();
          }
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.ParamsSetting {
  width: 100%;
  display: flex;
  height: 860px;
  .ParamsSetting1 {
    height: 98%;
    overflow-y: scroll;
    width: 222px;
    border-radius: 10px;
    margin-right: 20px;
    background: linear-gradient(
      -30deg,
      rgba(67, 85, 110, 0.5),
      rgba(48, 47, 67, 0.5)
    );

    .checkList {
      display: inline;
      height: 60px;
      line-height: 60px;
    }
  }

  .ParamsSetting2 {
    height: 98%;
    width: 200px;
    margin-right: 20px;
    border-radius: 10px;
    background: linear-gradient(
      -30deg,
      rgba(67, 85, 110, 0.5),
      rgba(48, 47, 67, 0.5)
    );
    .checkList2222 {
      height: 92%;
      overflow-y: scroll;
    }
  }

  .ParamsSetting3 {
    overflow-y: scroll;
    position: relative;
    height: 98%;
    flex: 1;
    border-radius: 10px;
    background: linear-gradient(
      -30deg,
      rgba(67, 85, 110, 0.5),
      rgba(48, 47, 67, 0.5)
    );
    .addButton {
      position: absolute;
      bottom: 4%;
      left: 50%;
      transform: translateX(-50%);
    }
    .barCode {
      margin: 20px 30px 0;

      .title {
        width: 96px;
        height: 40px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #feffff;
        line-height: 40px;
      }
    }
  }
}

/deep/.checkList {
  margin: 10px 0 0 20px;
  display: flex;
  flex-direction: column;

  .el-checkbox {
    color: white;
    margin-bottom: 20px;

    .el-checkbox__input {
      display: inline-block;
      width: 100px;
    }
  }
}
</style>